<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta name="format-detection" content="telephone=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=0.4">
    <title>登录_社优保</title>
    <link rel="stylesheet" href="__ROOT__/static/plugs/layui/css/layui.css?at={:date('md')}">
    <link rel="stylesheet" href="__ROOT__/static/index/css/admin.css?at={:date('md')}">
	<link rel="stylesheet" href="__ROOT__/static/index/css/animate.min.css">
	<link rel="stylesheet" href="__ROOT__/static/index/css/layui-admin.css">
	<link rel="stylesheet" href="__ROOT__/static/index/css/login.css">
	
   
    <!-- <link rel="stylesheet" href="__ROOT__/static/index/css/console.css?at={:date('md')}"> -->
    <link rel="stylesheet" href="__ROOT__/static/index/css/icon/iconfont.css?at={:date('md')}">
</head>
<body>
<div class="main">
	<div class="main_con">
		<div class="login-box-new">
			<div class="login-title-text">
				<p>欢迎来到社优保</p>
				<p>Welcome  To  sheyoubao </p>
			</div>
			
			<form  onsubmit="return false"   onkeydown="if(event.keyCode==13)return false;" method="post" class="layui-anim layui-anim-upbit layui-form " autocomplete="off">
				
				<ul>
					<li>
						<input class="layui-input" required pattern="^\S{4,}$" id="phone" name="mobile"  autocomplete="off" placeholder="请输入手机号码">
						
						<i class="iconfont iconiconzh1"></i>
					</li>
					<li>
						<input class="layui-input" required pattern="^\S{4,}$" name="verify"  autocomplete="off" placeholder="请输入验证码">
						<div class="phone-code">
							<p >获取验证码</p>
						</div>
						<i class="iconfont iconyanzhengma"></i>
					</li>
					<li>
						<input class="layui-input" required pattern="^\S{4,}$" name="name"  autocomplete="off" placeholder="请输入公司名称">
						
						<i class="iconfont iconqiyegongsi"></i>
					</li>
					<li>
						<input class="layui-input" required pattern="^\S{4,}$" name="password" maxlength="32" type="password" autocomplete="off" placeholder="请输入密码">
						<i class="iconfont iconmima"></i>
						<div class="isDisplay">
							<i class="iconfont iconClose"></i>
							<i class="iconfont iconchakanyanjingshishifenxi2" style="display: none"></i>
						</div>
					</li>
					<li>
						<!--<input class="layui-input" required pattern="^\S{4,}$" name="repassword" maxlength="32" type="password" autocomplete="off" placeholder="请确认密码">-->
						<!--<i class="iconfont iconmima"></i>-->
						
						<!--<span class="isDisplay" style="visibility: hidden;">
							<i class="iconfont iconClose"></i>
							<i class="iconfont iconchakanyanjingshishifenxi2" style="display: none;"></i>
						</span>-->
						<div class="agree"> <input class="agree-input" type="checkbox" required name=""  lay-skin="primary">同意<a href="{:url('index/login/agreement')}" target="_blank">《社优保平台协议》</a></div>
					</li>


					<li class="text-center padding-top-10 login_btn" style="padding-top: 20px !important; ">
						 <button style="margin-top: 0;" type="submit" class="layui-btn  layui-disabled full-width" data-form-loaded="注册">注册中</button>
					</li>
					<li style="text-align: center; padding-top: 20px !important;" class="explain_info" > <a class="forget-pw" href="{:url('index/login/index')}">已有账号，立即登录</a> 
					</li>
				</ul>
			</form>
			<div class="img-bottom">
				<img src="__ROOT__/static/index/img/login-bg-bottom.png" alt="">

			</div>

		</div>
<!--		<img src="__ROOT__/static/index/img/login-l-1.png" alt="">-->
	</div>

</div>



<script src="__ROOT__/static/plugs/layui/layui.all.js"></script>
<script src="__ROOT__/static/plugs/require/require.js"></script>
<script src="__ROOT__/static/index/admin.js"></script>
<script>
	$(document).ready(function(){
		$("form").vali(function (data) {
               
			   if($("input[type='checkbox']").is(':checked')){
				$.form.load(location.href, data, "post", null, null, null, 'false');
			   }else{
				 $.msg.error("请同意《社优保平台协议》", 1)
			   }
			
		});

		$(".isDisplay").on("click","i",function(){
			$(this).hide().siblings().show();
			if($("[name='password'][type='password']").length){
				$("[name='password'][type='password']").attr("type","text")
			}else{
				$("[name='password'][type='text']").attr("type","password")
			}		
		})

		$(".layui-btn").on('keydown', 'li', function(e) {
			if(e.keyCode == 13) {
				e.preventDefault()
			}
		})
		document.onkeydown = function (e) { // 回车提交表单
		// 兼容FF和IE和Opera
			var theEvent = window.event || e;
			var code = theEvent.keyCode || theEvent.which || theEvent.charCode;
			if (code == 13) {

				$(".layui-btn").click();
			}
		}
		//获取验证码
		timer="";
		nums = 60;
		phoneFlag = true;
		$(".phone-code").on("click","p",function(){
			if(phoneFlag){
				var that = this
				//检测手机号码
				var isCheck = checkPhone("phone")
				if(!isCheck){
					return false
				}

				phoneFlag=false;


				$.ajax({
					url: '{:url("send_sms")}',
					data: {
						"mobile":$("input[name='mobile']").val(),
						"type":1,
						"verify_type":1
					},
					type: "post",
					success: function(res) {
						if(res.code == 1) {
							layer.msg("验证码发送成功，请等待~")
							// $.msg.alert("验证码发送成功，请等待~")

							// 验证码倒计时
							var code=$(that);
							timer=setInterval(function(){
								if(nums>0){
									nums--;
									code.html(nums+" 秒");
									code.addClass("gray-bg");
								}
								else{
									clearInterval(timer);
									nums=60;//重置回去
									phoneFlag = true
									code.html("获取验证码");
								}
							},1000)

						} else {
							phoneFlag = true
							layer.msg(res.info)
						}
					},
					error: function() {
						layer.msg("发送失败");
					}
				});


			}

		});
	})


</script>
<style>
	form button::after {
	content: "注册";
	
	}
	.login-box{
		margin-top: 40px;
	}
	.login-title{
		background-image: url('__ROOT__/static/index/img/login-title3.png');
	}
	.explain_info a{
		display: inline-block;
		float: inherit;
	}
	.agree{
		/*color: #fff;*/
	}
	.agree input{
		display: inline-block;
		padding-right: 10px;
		
	}
	.agree a{
		display: inline-block;
		float: none;
		padding: 0;
		/* color:#1E9FFF ; */
		font-size: 14px;
	}
	.agree .layui-unselect i{

		 color:#FFFFFF ;

	}
	.agree .layui-form-checked[lay-skin=primary] i{
		border-color: #61CAD7 !important;
   	 	background-color: #61CAD7;
	}
	.phone-code{
		position: absolute;
		top: 49px;
		right: 0;
		cursor: pointer;

	}
	.phone-code p{
		color:#61CAD7;
	}
	.isDisplay{
		position: absolute;
		top: 49px;
		right: 0;
		cursor: pointer;

	}

	input:-webkit-autofill {
		-webkit-text-fill-color: #ffffff !important;/*浏览器记住密码的字的颜色*/
		transition: background-color 5000s ease-in-out 0s;/*通过延时渲染背景色变相去除背景颜色*/
		caret-color: #FFFFFF;/*光标颜色*/
	}

	input:focus { outline: none; }/*外边框线去除*/




</style>
</body>
</html>
